<template>
  <div class="desktop-icons">
    <DesktopIcon
      v-for="icon in icons"
      :key="icon.id"
      :icon="icon"
      :is-selected="selectedIcons.includes(icon.id)"
      @select="handleSelect"
      @open="handleOpen"
      @dragstart="handleDragStart"
      @contextmenu="handleContextMenu"
    />
  </div>
</template>

<script setup>
import DesktopIcon from './DesktopIcon.vue'

defineProps({
  icons: {
    type: Array,
    required: true
  },
  selectedIcons: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['select', 'open', 'dragstart', 'contextmenu'])

const handleSelect = (id, event) => {
  emit('select', id, event)
}

const handleOpen = (icon) => {
  emit('open', icon)
}

const handleDragStart = (icon, event) => {
  emit('dragstart', icon, event)
}

const handleContextMenu = (icon, event) => {
  emit('contextmenu', icon, event)
}
</script>

<style scoped>
.desktop-icons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 1;
}
</style>

